<template>
  <div>
    <public-head title="投诉建议"></public-head>
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left">联系人：</span>
        <yd-input slot="right" v-model="form.username" placeholder="请输入联系人姓名"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">联系电话：</span>
        <yd-input slot="right" v-model="form.phone" placeholder="请输入联系电话"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">投诉/建议：</span>
        <yd-textarea slot="right" v-model="form.other_msg" placeholder="请输入投诉或建议" maxlength="200"></yd-textarea>
      </yd-cell-item>
    </yd-cell-group>
    <yd-button size="large" type="primary" @click.native="submit">提交</yd-button>
    <transition name="fade">
      <overlay v-if="showAlert"></overlay>
    </transition>
    <!--申请成功弹窗-->
    <div class="alert" v-if="showAlert">
      <h2>提交成功</h2>
      <p>谢谢您的建议，我们会即时处理你的建议！。</p>
      <router-link to="/member" tag="button" type="button">确定</router-link>
    </div>
    <loading v-if="is_loading"></loading>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import wx from "weixin-js-sdk";
export default {
  components: {},
  data() {
    return {
      showAlert: false, // 显示弹窗
      form: {
        phone: "", // 联系人电话号码
        username: "", // 用户名称
        other_msg: "" // 投诉建议
      },
      showAlert: false // 显示弹窗
    };
  },
  created() {},
  methods: {
    submit() {
      if (!this.form.username) {
        this.$dialog.toast({
          mes: "请输入联系人姓名",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      let reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
      if (!this.form.phone || !reg.test(this.form.phone)) {
        this.$dialog.toast({
          mes: "请输入正确的联系方式",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      if (!this.form.other_msg) {
        this.$dialog.toast({
          mes: "请输入你的建议或投诉",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      // 提交接口
      this.isLoading(true);
      this.axios
        .post(root + "/api/suggest/add", {
          token: this.token,
          problem: this.form.other_msg,
          name: this.form.username,
          phone: this.form.phone
        })
        .then(res => {
          this.isLoading(false);
          console.log(res);
          res.data.status
            ? (this.showAlert = true)
            : this.$dialog.toast({
                mes: res.data.message,
                timeout: 1000,
                icon: "error"
              });
        });
    },
    ...mapActions([
      "maintainInfo",
      "recordAddress",
      "location",
      "contactsId",
      "isLoading"
    ])
  },
  computed: {
    //遮罩状态
    mark() {
      return this.$store.getters.markStatus;
    },
    ...mapState([
      "toast",
      "toastText",
      "maintain_info",
      "curAddress",
      "degreeType",
      "lon",
      "lat",
      "token",
      "contacts_id",
      "is_loading"
    ])
  }
};
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
@import "../../common/style/transition.less";
.apply-maintain {
  .page-content {
    padding-bottom: 0.4rem;
  }

  .content {
    margin: 0.2rem 0.2rem 0.8rem;

    .submit {
      display: block;
      margin: 0 auto;
      background: #5b91fe;
      box-shadow: 0 3px 5px 0 rgba(91, 144, 254, 0.5);
      border-radius: 4px;
    }
  }
}

.alert {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 5.5rem;
  background: #fff;
  z-index: 10000;
  .br;
  h2 {
    .ft(0.28rem);
    font-weight: 700;
    color: #222;
    line-height: 0.55rem;
    .tc;
  }
  p {
    padding: 0.21rem 0.45rem;
    .ft;
    color: #404040;
    line-height: 0.5rem;
  }
  button {
    display: block;
    width: 100%;
    line-height: 0.77rem;
    .ft(0.28rem);
    color: #5b91fe;
    .tc;
    border-top: 1px solid #e0e0e0;
  }
}
</style>